<style>
    input{
        position: relative;z-index: 1;
    }
</style>
<body>
    <span style="position: absolute;bottom: 30px;"></span>
    <input type="button"value='+'id='add'>
    <input type="button"value='-' id="diff">
    <input type="color" id="color">
</body>
    <script>
     
     
        var span = document.querySelector('span')
        var oadd = document.getElementById('add')
        var odiff = document.getElementById('diff')
        var ocolor = document.getElementById('color')
      
        var h =10;
        var w =10;
        var c ='red'

     document.onmousemove = function(eve){
        //  var e = eve ? eve:window.event;
       //逻辑短路    //
       var e = eve || window.event;
  
       //显示鼠标坐标
       span.innerHTML= e.pageX +','+ e.pageY;
            
       var div = document.createElement('div');
       div.style.position = 'absolute';
       div.style.left = e.pageX + 'px'
       div.style.top = e.pageY + 'px'
       div.style.width=w/2 +'px'
       div.style.height=h/2 + 'px'
       div.style.background = c
       div.style.borderRadius='50%'
       document.body.appendChild(div)
    

          }
          oadd.onclick = function(){
            w+=5
            h+=5
          }
          odiff.onclick = function(){
            w-=5
            h-=5
          }
          ocolor.onchange = function(){
            c = this.value;
          }
     
    </script>